$(function(){
    $("#del").click(function(){
        // fadeto是淡出动画
        $(this).parent().parent().fadeTo("slow",0,function(){
            $("#del").parent().parent().remove();
        });
    })
    $("#d_myjd").mouseenter(function(){
        $(this).css("background","#fff");
        $("#myjd").css("display","block");
    })
    $("#d_myjd").mouseleave(function(){
        $(this).css("background","#e3e4e5");
        $("#myjd").css("display","none");
    })
    // 模拟后台传递来的json数据 根据key取value/
    // 如果value是数组,就根据下标取值 如果value是json 再根据key取vlue就行了
    // 动态网页的前提是有一个后台程序员 给你传数据
    var j={
        "top":{"left":["待处理订单","返修退换货","降价商品"],
        "right":["我的问答","我的关注"]},
        "bottom":{"left":["我的京豆","我的白条"],
        "right":["我的优惠券","我的理财"]}
    };
    // 上部div数据
    var top=j.top;
    // 上部左边div
    var topLeftDiv= $("<div></div>");
    // 循环json数据格式 根据left(key)取value(数组)
    for(var i=0;i<top.left.length;i++){
        // 往上部左边div里面添加a标签
        topLeftDiv.append("<div class='myjd_item'><a href='#'>"+top.left[i]+"</a></div>");
    }
    // 上部右边div
    var topRightDiv= $("<div></div>");
    for(var i=0;i<top.right.length;i++){
        topRightDiv.append("<div class='myjd_item'><a href='#'>"+top.right[i]+"</a></div>")
    }
    // 把自己创建的div加进去
    $("#myjd_1").append(topLeftDiv);
    $("#myjd_1").append(topRightDiv);
    // 下面是下半部div的数据,和上半部只有细微差别
    var bottom=j.bottom;
    var bottomLeftDiv= $("<div'></div>");
    for(var i=0;i<bottom.left.length;i++){
        bottomLeftDiv.append("<div class='myjd_item'><a href='#'>"+bottom.left[i]+"</a></div>");
    }
    var bottomRightDiv= $("<div></div>");
    for(var i=0;i<bottom.right.length;i++){
        bottomRightDiv.append("<div class='myjd_item'><a href='#'>"+bottom.right[i]+"</a></div>")
    }
    $("#myjd_2").append(bottomLeftDiv);
    $("#myjd_2").append(bottomRightDiv);
})